<template>
  <scroller :show-scrollbar="false">
    <text class="title py-2">{{farm.farmName}}</text>
    <!-- <text class="caption text-gray pb-2">{{title}}</text> -->

    <div class="td-row border-top">
      <!-- <text class="td-text flex td-br">基地名称</text> -->
      <text class="td-text flex td-br">栋数</text>
      <text class="td-text flex td-br">入栏数(羽)</text>
      <text class="td-text flex td-br">死淘数(羽)</text>
      <text class="td-text flex">存栏数(羽)</text>
    </div>
    <div class="td-row">
      <!-- <text class="td-text flex text-gray td-br">{{farm.farmName}}</text> -->
      <text class="td-text flex text-gray td-br">{{count.chick_house || '-'}}</text>
      <text class="td-text flex text-gray td-br">{{count.in_column_amount || '-'}}</text>
      <text class="td-text flex text-gray td-br">{{count.die_eli_amount || '-'}}</text>
      <text class="td-text flex text-gray">{{count.current_amount || '-'}}</text>
    </div>

    <div class="house-list">
      <text class="house-next house-next-left icon"
            v-if="houseCount >= 4 && houseIndex > 1">&#xe606;</text>
      <scroller class="house-scroller"
                ref="house-scroller"
                scroll-direction="horizontal">
        <div v-for="(house, index) in houses"
             :key="index"
             :ref="`house-${index}`"
             class="house-wrap"
             @click="onSelectHouse(house, index)">
          <div class="flex-row"
               :class="[index === houseIndex ? 'house-inner-active' : '', 'house-inner']">
            <text class="icon mr-1"
                  :class="[index === houseIndex ? 'house-text-active' : '']">&#xe87b;</text>
            <text :class="[index === houseIndex ? 'house-text-active' : '']">鸡舍{{house.house_no}}号</text>
          </div>
        </div>
      </scroller>
      <text class="house-next icon"
            v-if="houseCount >= 4 && houseCount - 2 > houseIndex">&#xe605;</text>
    </div>

    <div class="container">
      <div ref="container-wrap"
           class="container-wrap"
           :style="{width: houseCount * contentWidth}">
        <div class="container-item px-1 context-wrap"
             v-for="(house, index) in houses"
             :key="index">

          <text class="td-caption">鸡舍信息{{house.isEmptyStatus?'（空棚）':''}}</text>
          <div class="td-row border-top">
            <text class="td-text flex td-br td-bl">鸡舍编号</text>
            <text class="td-text flex td-br">日龄</text>
            <text class="td-text flex td-br">入栏数(羽)</text>
            <text class="td-text flex td-br">死淘数(羽)</text>
            <text class="td-text flex td-br">存栏数(羽)</text>
          </div>
          <div class="td-row"
               v-if="!house.isEmptyStatus">
            <text class="td-text flex text-gray td-br td-bl">{{house.house_no || '-'}}</text>
            <text class="td-text flex text-gray td-br">{{house.current_age || '-'}}</text>
            <text class="td-text flex text-gray td-br">{{house.in_column_amount || '-'}}</text>
            <text class="td-text flex text-gray td-br">{{house.die_eli_amount || '-'}}</text>
            <text class="td-text flex text-gray td-br">{{house.current_amount || '-'}}</text>
          </div>
          <div class="td-row"
               v-else>
            <text class="td-text flex text-gray td-br td-bl">{{house.house_no || '-'}}</text>
            <text class="td-text flex text-gray td-br">0</text>
            <text class="td-text flex text-gray td-br">0</text>
            <text class="td-text flex text-gray td-br">0</text>
            <text class="td-text flex text-gray td-br">0</text>
          </div>

          <text class="td-caption">饲养信息</text>
          <div class="td-row border-top">
            <text class="td-text flex td-br td-bl">用料量(千克)</text>
            <text class="td-text flex td-br">死亡数(羽)</text>
            <text class="td-text flex td-br">淘汰数(羽)</text>
            <text class="td-text flex td-br"
                  v-if="house.isEggChick">蛋均重(g)</text>
            <text class="td-text flex td-br"
                  v-else>鸡均重(g)</text>
          </div>
          <div class="td-row"
               v-if="!house.isEmptyStatus">
            <div class="flex td-br td-bl">
              <input type="number"
                     @focus="handleInputFocus('feed_dosage')"
                     @blur="handleInputBlur('feed_dosage')"
                     placeholder="请填写"
                     v-model="house.log.data.feed_dosage"
                     class="input" />
            </div>
            <div class="flex td-br">
              <input type="number"
                     @focus="handleInputFocus('die_num')"
                     @blur="handleInputBlur('die_num')"
                     placeholder="请填写"
                     v-model="house.log.data.die_num"
                     class="input" />
            </div>
            <div class="flex td-br">
              <input type="number"
                     @focus="handleInputFocus('eli_num')"
                     @blur="handleInputBlur('eli_num')"
                     placeholder="请填写"
                     v-model="house.log.data.eli_num"
                     class="input" />
            </div>
            <div class="flex td-br"
                 v-if="house.isEggChick">
              <input type="number"
                     @focus="handleInputFocus('egg_avg_weight')"
                     @blur="handleInputBlur('egg_avg_weight')"
                     placeholder="请填写"
                     v-model="house.log.data.egg_avg_weight"
                     class="input" />
            </div>
            <div class="flex td-br"
                 v-else>
              <input type="number"
                     @focus="handleInputFocus('avg_weight')"
                     @blur="handleInputBlur('avg_weight')"
                     placeholder="请填写"
                     v-model="house.log.data.avg_weight"
                     class="input" />
            </div>
          </div>
          <div class="td-row"
               v-else>
            <div class="flex td-br td-bl">
              <text class="td-text bg-light">{{house.log.data.feed_dosage || '-'}}</text>
            </div>
            <div class="flex td-br">
              <text class="td-text bg-light">{{house.log.data.die_num || '-'}}</text>
            </div>
            <div class="flex td-br">
              <text class="td-text bg-light">{{house.log.data.eli_num || '-'}}</text>
            </div>
            <div class="flex td-br"
                 v-if="house.isEggChick">
              <text class="td-text bg-light">{{house.log.data.egg_avg_weight || '-'}}</text>
            </div>
            <div class="flex td-br"
                 v-else>
              <text class="td-text bg-light">{{house.log.data.avg_weight || '-'}}</text>
            </div>
          </div>

          <!-- <div class="td-row">
            
            <text class="td-text flex td-br">温度℃</text>
            <text class="td-text flex td-br">湿度%</text>
          </div> -->
          <!-- <div class="td-row"
               v-if="!house.isEmptyStatus">
            
            <div class="flex td-br">
              <input type="number"
                    
                     @blur="handleInputBlur('temperature')"
                     placeholder="请填写"
                     v-model="house.log.data.temperature"
                     class="input" />
            </div>
            <div class="flex td-br">
              <input type="number"
                    
                     @blur="handleInputBlur('humidity')"
                     placeholder="请填写"
                     v-model="house.log.data.humidity"
                     class="input" />
            </div>
          </div> -->
          <!-- <div class="td-row"
               v-else>
            
            <div class="flex td-br">
              <text class="td-text bg-light">{{house.log.data.temperature || '-'}}</text>
            </div>
            <div class="flex td-br">
              <text class="td-text bg-light">{{house.log.data.humidity || '-'}}</text>
            </div>
          </div> -->

        </div>
      </div>

    </div>

    <div class="mt-1 p-1 bg-white">
      <text class="td-caption">温湿度</text>
      <div class="flex-row">
        <text class="flex btn-select btn-left"
              :class="[dateSelectDiff===1 && 'btn-active']"
              @click="onSelectDateType(1)">日</text>
        <text class="flex btn-select"
              :class="[dateSelectDiff===7 && 'btn-active']"
              @click="onSelectDateType(7)">周</text>
        <text class="flex btn-select btn-right"
              :class="[dateSelectDiff===30 && 'btn-active']"
              @click="onSelectDateType(30)">月</text>
      </div>

      <div class="py-1 flex-row align-items-center">
        <text class="icon btn-nav"
              @click="onSelectDateArrow(false)">&#xe6a5;</text>
        <text class="text-sm text-center flex">{{dateStr}}</text>
        <text class="icon btn-nav"
              :class="[isEndDate && 'btn-disabled']"
              @click="onSelectDateArrow(true)">&#xe6a2;</text>
      </div>

      <div v-if="hasDevice===1">
        <bmchart ref="chart1"
                 :options="$format(temperatureOptions)"
                 style="width:730; height:460;"></bmchart>
        <bmchart ref="chart2"
                 :options="$format(humidityOptions)"
                 style="width:730; height:460;"></bmchart>
      </div>

      <text v-else-if="hasDevice===0"
            class="empty-text">暂无温湿度数据</text>

      <div v-else
           class="empty-text flex-row justify-content-center"
           @click="getDeviceData">
        <text class="text-sm text-muted">获取温湿度数据失败，</text>
        <text class="empty-error">点击重试</text>
      </div>

    </div>
  </scroller>
</template>
<script>
import {
  STORAGE_FARM
} from '../../plugins/constant'
import {
  LAY_EGG_DAY
} from '../../plugins/enumChick'
import { debounce } from '../../plugins/utils.js'

const animation = weex.requireModule('animation')
const dom = weex.requireModule('dom')

const LOG_TIME_SEPARATOR = 1 // 0~23 点

export default {
  components: {},
  props: {},
  data() {
    return {
      logTime: '',
      farm: {},
      count: {},
      houses: [],
      houseIndex: 0,
      contentWidth: 750,
      log: {},
      logError: false,
      focusKey: '',

      hasDevice: 1, // 0 没有设备 1 有设备，并成功获取数据 2 获取数据失败
      dateSelectDiff: 1,
      startDate: new Date(),
      endDate: new Date(),
      isEndDate: true,
      temperatureOptions: {},
      humidityOptions: {}
    }
  },
  computed: {
    title() {
      return `${this.$utils.dateFormat(this.logTime, 'yyyy年MM月dd日')} - 基地饲养日志`
    },
    houseCount() {
      return this.houses.length
    },
    dateStr() {
      const end = this.$utils.dateFormat(new Date(this.endDate - 8.64e7), 'yyyy.MM.dd')
      if (this.dateSelectDiff === 1) {
        return end
      }
      const start = this.$utils.dateFormat(this.startDate, 'yyyy.MM.dd')
      return `${start} ~ ${end}`
    }
  },
  watch: {},
  eros: {
    beforeDisappear() {
      if (this.focusKey) {
        this.handleInputBlur(this.focusKey)
      }
    }
  },
  created() {
    this.getFarm()
  },
  mounted() { },
  methods: {
    getFarm() {
      this.endDate = this.deltaDay(new Date(), 1)
      this.startDate = this.deltaDay(this.endDate, -1)

      this.farm = this.$storage.getSync(STORAGE_FARM) || {}
      if (this.farm.id) {
        this.getData()
      } else {
        this.$notice.toast({ message: '没有鸡场信息' })
        this.$router.setBackParams({ type: 1 })
      }

      this.$navigator.setRightItem({
        text: '历史日志'
      }, this.goHistory)
    },
    async getData(force = false, deviceForce = true) {
      // 日志时间
      this.logTime = this.getLogTime()

      // 统计信息
      const [count] = await this.$utils.pm(this.getCount())
      this.count = count || {}

      // 鸡舍列表
      const [houses] = await this.$utils.pm(this.getHouses())
      this.houses = (houses || []).map(item => {
        item.log = {
          hasFetch: false,
          fetchError: false,
          data: {}
        }
        return item
      })

      // 设备列表
      let [devices] = await this.$utils.pm(this.getDeviceList())
      devices = devices || []
      for (const house of this.houses) {
        for (const device of devices) {
          if (device.house_no === house.house_no) {
            house.deviceSn = device.doid
            break
          }
        }
      }

      // 日志
      if (this.houseCount) {
        if (this.houseIndex >= this.houseCount) {
          this.houseIndex = 0
        }
        this.getLogByIndex(force)

        if (deviceForce) {
          this.getDeviceData()
        }
      }
    },
    async getLogByIndex(force = false) {
      const house = this.houses[this.houseIndex]

      if (!force && house.log.hasFetch && !house.log.fetchError) {
        return
      }

      const [log] = await this.$utils.pm(this.getLog(house.chick_house_enter_id))
      house.log.hasFetch = true
      house.log.fetchError = !log
      house.log.data = log || {}
    },
    getLogTime() {
      // 保持与任务生成的时间一样 01:00
      const nowDate = new Date()
      const hour = nowDate.getHours()
      let logDate = nowDate
      if (hour < LOG_TIME_SEPARATOR) {
        logDate = new Date(+nowDate - 8.64e7)
      }
      return this.$utils.dateFormat(logDate, 'yyyy-MM-dd')
    },
    getCount() {
      return new Promise((resolve, reject) => {
        this.$api.getData({
          server: 'agr_chain',
          table: 'supplier_info_view_app',
          params: {
            'supplier_id.eq': this.farm.id
          },
          errorMsg: '获取数据失败'
        }).then(res => {
          resolve((res && res.length && res[0]) || {})
        }).catch(err => {
          reject(err)
        })
      })
    },
    getHouses() {
      return new Promise((resolve, reject) => {
        this.$api.getData({
          server: 'agr_chain',
          table: 'chick_house_view_app',
          params: {
            'supplier_id.eq': this.farm.id
          },
          order: {
            house_no: 'asc'
          },
          errorMsg: '获取数据失败'
        }).then(res => {
          const data = (res || []).map(item => {
            item.isEggChick = +item.product_type === 2
            item.isEmptyStatus = +item.house_status === 2 // 1 清扫消毒、2 空硼通风、3 已入栏
            return item
          })
          resolve(data)
        }).catch(err => {
          reject(err)
        })
      })
    },
    getLog(houseEnterId) {
      return new Promise((resolve, reject) => {
        this.$api.getData({
          server: 'agr_chain',
          table: 'base_produce_log',
          params: {
            'chick_house_enter_id.eq': houseEnterId,
            'log_time.gte': `${this.logTime} 00:00:00`,
            'log_time.lte': `${this.logTime} 23:59:59`
          },
          errorMsg: '获取数据失败'
        }).then(res => {
          const data = (res && res.length && res[0]) || {}
          resolve(data)
        }).catch(err => {
          reject(err)
        })
      })
    },
    onSelectHouse(house, index) {
      this.houseIndex = index
      this.getLogByIndex()
      this.getDeviceData()
      this._animateTransformX(index)
    },
    _animateTransformX(index) {
      const containerEl = this.$refs[`container-wrap`]
      if (!containerEl) { return }
      const dist = index * this.contentWidth

      animation.transition(containerEl, {
        styles: {
          transform: `translateX(${-dist}px)`
        },
        duration: 200,
        timingFunction: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
        delay: 0
      }, () => { })

      // const tabEl = this.$refs[`house-scroller`]
      const houseEl = this.$refs[`house-${index}`][0]
      if (!houseEl) { return }
      dom.scrollToElement(houseEl, {
        offset: -250
      })
    },
    handleInputFocus(key) {
      this.focusKey = key
    },

    // blur事件会触发两次
    handleInputBlur: debounce(function (key) {
      this.focusKey = ''

      const house = this.houses[this.houseIndex]
      const logData = house.log.data

      // 控制一天一个日志，api出错时不能添加
      if (house.log.fetchError) {
        this.$notice.toast({ message: '获取日志失败，不能编辑饲养信息，请返回重试！' })
      }

      // 处理空字符串的情况，传null
      const data = {}
      data[key] = logData[key] || null

      const id = logData.base_produce_log_id
      if (id) {
        // 需要刷新统计数据的字段
        const needRefreshKeys = ['die_num', 'eli_num']
        this.updateData(id, data, needRefreshKeys.includes(key))
      } else {
        data.chick_house_enter_id = house.chick_house_enter_id
        data.log_type = house.product_type
        data.log_time = `${this.logTime} 01:00:00`
        this.addData(data)
      }
    }, 100),
    addData(data) {
      this.$notice.loading.show('日志提交中...')
      this.$api.addData({
        server: 'agr_chain',
        table: 'base_produce_log',
        data,
        errorMsg: '添加失败，请重试！'
      }).then(res => {
        this.getData(true, false)
        this.$router.setBackParams({ type: 3 })
      }).finally(() => {
        this.$notice.loading.hide()
      })
    },
    updateData(id, data, needRefresh) {
      this.$api.updateData({
        server: 'agr_chain',
        table: 'base_produce_log',
        id,
        data,
        errorMsg: '修改失败，请重试！'
      }).then(res => {
        if (needRefresh) {
          this.getData(true, false)
        }
        this.$router.setBackParams({ type: 3 })
      })
    },
    goHistory() {
      this.$nav.open({
        name: 'farm.feed.history'
      })
    },

    // 获取温湿度数据
    getDeviceList() {
      return this.$api.getData({
        server: 'agr_chain',
        table: 'device_info',
        params: {
          'supplier_id.eq': this.farm.id,
          'device_type.eq': 1
        },
        errorMsg: '获取数据失败'
      })
    },
    async getDeviceData() {
      const deviceSn = this.houses[this.houseIndex].deviceSn
      const queryType = this.dateSelectDiff === 1 ? 1 : 3

      if (!deviceSn) {
        this.hasDevice = 0
        return
      }

      this.hasDevice = 1
      this.$notice.loading.show("获取温湿度数据...")
      this.getDeviceTh(deviceSn, queryType).then(data => {
        const formatStr = queryType === 1 ? 'hh:mm' : 'yyyy-MM-dd'

        const xData = []
        const tData = []
        const hData = []
        for (let d of data) {
          d = d || []

          let x = d[0] || ''
          if (/\d{2,4}(-|\/)\d{1,2}(-|\/)\d{1,2}/.test(x)) {
            x = this.$utils.dateFormat(x, formatStr)
          } else {
            x = x ? new Date(`${x}+0800`) : '-'
            x = this.isValidDate(x) ? this.$utils.dateFormat(x, formatStr) : '-'
          }
          xData.push(x)

          let tv = d[2] || 0
          tv = Math.round(tv * 100) / 100
          tData.push(tv)

          let hv = d[3] || 0
          hv = Math.round(hv * 100) / 100
          hData.push(hv)
        }

        this.temperatureOptions = this.getOption({
          xData: xData.map(v => `${v},${this.houseIndex + 1},温度,℃`),
          yData: tData,
          title: '温度',
          subTitle: `鸡舍${this.houseIndex + 1}号`,
          unit: '℃',
          color: ['#e51c23'],
          backgroundColor: '#fff'
        })
        this.humidityOptions = this.getOption({
          xData: xData.map(v => `${v},${this.houseIndex + 1},湿度,%`),
          yData: hData,
          title: '湿度',
          subTitle: `鸡舍${this.houseIndex + 1}号`,
          unit: '%',
          color: ['#42bd56'],
          backgroundColor: '#fff'
        })
      }).catch(err => {
        this.hasDevice = 2
        this.$notice.toast({ message: err.gmMessage || '获取温湿度数据失败' })
      }).finally(() => {
        this.$notice.loading.hide()
      })
    },
    getOption({ xData, yData, title, subTitle, unit, color, backgroundColor }) {
      const yText = `单位: ${unit}`
      return {
        color,
        backgroundColor,
        title: {
          text: title,
          top: 0,
          left: 'center',
          show: true,
          textStyle: {
            fontSize: 14
          },
          subtext: subTitle
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            const param = params[0]
            const arr = param.name.split(',')
            return `
              鸡舍${arr[1]}号 ${arr[0]}<br/>
              ${param.marker}${arr[2]}：${param.value}${arr[3]}
            `
          }
        },
        grid: {
          top: '25%',
          left: '3%',
          right: '12%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xData,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              formatter: function (params) {
                const arr = params.split(',')
                return arr[0]
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: yText
          }
        ],
        series: [
          {
            name: yText,
            type: 'line',
            smooth: true,
            data: yData,
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              data: [
                { type: 'average', name: '平均值' }
              ]
            }
          }
        ]
      }
    },
    onSelectDateType(diff) {
      this.dateSelectDiff = diff

      this.endDate = this.deltaDay(new Date(), 1)
      this.startDate = this.deltaDay(this.endDate, -1 * diff)

      this.getDeviceData()
    },
    onSelectDateArrow(direct) {
      if (direct && this.isEndDate) {
        return
      }

      const sign = direct ? 1 : -1
      const diff = sign * this.dateSelectDiff

      this.startDate = this.deltaDay(this.startDate, diff)
      this.endDate = this.deltaDay(this.endDate, diff)

      this.isEndDate = this.endDate.setHours(0, 0, 0, 0) >= this.deltaDay(new Date(), 1).setHours(0, 0, 0, 0)

      this.getDeviceData()
    },
    deltaDay(date, day = -7) {
      return new Date(date.getTime() + 8.64e7 * day)
    },
    getDeviceTh(deviceSn, queryType) {
      return this.$http({
        method: 'GET',
        name: 'other.th',
        data: {
          doid: deviceSn,
          queryType,
          startDate: this.$utils.dateFormat(this.startDate, 'yyyy-MM-dd'),
          endDate: this.$utils.dateFormat(this.endDate, 'yyyy-MM-dd')
        }
      }).then(res => {
        return (res && res.data) || []
      })
    },
    isValidDate(date) {
      return date instanceof Date && !isNaN(date.getTime())
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.icon {
  font-family: alicon;
}
.p-1 {
  padding: 10px;
}
.p-3 {
  padding: 30px;
}
.px-1 {
  padding-left: 10px;
  padding-right: 10px;
}
.py-1 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.py-2 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.pt-2 {
  padding-top: 20px;
}
.pb-2 {
  padding-bottom: 20px;
}
.pb-1 {
  padding-bottom: 10px;
}
.pb-3 {
  padding-bottom: 30px;
}
.pb-5 {
  padding-bottom: 50px;
}
.mr-1 {
  margin-right: 10px;
}
.mb-1 {
  margin-bottom: 10px;
}
.mt-1 {
  margin-top: 10px;
}
.bg-white {
  background-color: #fff;
}
.text-muted {
  color: #999;
}
.text-gray {
  color: #666;
}
.text-primary {
  color: $primary;
}
.text-center {
  text-align: center;
}
.flex-row {
  flex-direction: row;
}
.text-sm {
  font-size: 26px;
}
.flex {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.border-bottom {
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}
.border-top {
  border-top-width: 1px;
  border-top-color: $border-color;
}
.font-weight-bold {
  font-weight: bold;
}
.align-items-center {
  align-items: center;
}
.justify-content-center {
  justify-content: center;
}
.empty-text {
  padding-top: 100px;
  font-size: 28px;
  color: #999;
  text-align: center;
  height: 250px;
}
.empty-error {
  color: $primary;
  font-size: 28px;
}

.td-row {
  width: 750px;
  flex-direction: row;
  align-items: center;
  background-color: #fff;
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}
.td-text {
  text-align: center;
  font-size: 25px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.td-caption {
  font-size: 28px;
  margin-top: 30px;
  margin-bottom: 10px;
  padding-left: 20px;
  border-left-width: 5px;
  border-left-color: $primary;
}
.td-br {
  border-right-width: 1px;
  border-right-color: $border-color;
}
.td-bl {
  border-left-width: 1px;
  border-left-color: $border-color;
}

.title {
  background-color: #fff;
  text-align: center;
}
.caption {
  background-color: #fff;
  text-align: center;
  font-size: 28px;
}

.house-scroller {
  flex-direction: row;
  width: 750px;
  height: 90px;
  padding-left: 20px;
  padding-right: 20px;
}
.house-wrap {
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
.house-inner {
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 20px;
  padding-bottom: 20px;
  height: 80px;
  text-align: center;
  font-size: 30px;
}
.house-inner-active {
  border-bottom-width: 4px;
  border-bottom-color: $warning;
}
.house-text-active {
  color: $primary;
}

.house-list {
  margin-top: 10px;
  background-color: #fff;
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}
.house-next {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  line-height: 100px;
  color: #999;
  background-image: linear-gradient(to left, #fff, rgba(255, 255, 255, 0.2));
}
.house-next-left {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  line-height: 100px;
  color: #999;
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2), #fff);
}

.container {
  width: 750px;
}
.container-wrap {
  flex: 1;
  flex-direction: row;
  align-items: stretch;
}
.container-item {
  flex: 1;
  background-color: #fff;
}
.context-wrap {
  padding-bottom: 20px;
}

.input {
  flex: 1;
  height: 60px;
  line-height: 60px;
  font-size: 26px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  background-color: #ffe;
  tint-color: #999;
}

.bg-light {
  background-color: #fafafa;
}

.btn-select {
  padding: 15px;
  text-align: center;
  border-width: 1px;
  border-color: $border-color;
  border-right-width: 0;
}
.btn-left {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.btn-right {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-right-width: 1px;
}
.btn-active {
  background-color: $primary-light;
  border-color: $primary-light;
  color: #fff;
}
.btn-nav {
  border-width: 1px;
  border-color: $border-color;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  width: 100px;
}
.btn-disabled {
  color: $border-color;
}
</style>
